<template>
  <div class="search">
    <van-search
        v-model="searchText"
        autofocus
        placeholder="请输入搜索关键词"
        @input="changeText"
        @search="gotoSearchDetails('search',searchText)"
    />
    <div class="search-suggestions soft" v-if="showSearchSuggestions">
      <template v-if="Object.keys(suggestData).length > 0">
        <template v-for="field in searchFields" :key="field.fieid">
          <div class="split-block" v-if="suggestData[field.fieid]" :style="{order:getOrder(field.fieid)}">
            <h4 class="subtitle">
              <van-icon
                  class="subtitle-icon"
                  class-prefix="music"
                  :name="field.icon"
              />
              {{ field.title }}
            </h4>
            <ul :class="field.listClass">
              <li :class="field.listItemClass" v-for="(data,index) in suggestData[field.fieid]" :key="index" v-touch
                  @click="gotoSearchDetails(field.fieid,data[field.nameKey])"
              >
                <template v-if="field.fieid === 'songs'">
                  <v-text :text="data[field.nameKey]" mode="marquee"/>
                </template>
                <template v-else>

                  <div class="avatar">
                    <van-image
                        width="100%"
                        height="100%"
                        fit="cover"
                        :src=" typeof field.picKey === 'function'? field.picKey(data) : data[field.picKey]"
                        :round="field.roundPic"
                    />
                  </div>
                  <div class="name">
                    <span>{{ data[field.nameKey] }}</span>
                  </div>
                </template>
              </li>
            </ul>
          </div>
        </template>


        <!--        <div class="split-block" v-if="suggestData.songs" :style="{order:getOrder('songs')}">-->
        <!--          <h4 class="subtitle">-->
        <!--            <van-icon-->
        <!--                class="subtitle-icon"-->
        <!--                class-prefix="music"-->
        <!--                name="yinle"-->
        <!--            />-->
        <!--            音乐-->
        <!--          </h4>-->
        <!--          <ul class="song-list">-->
        <!--            <li class="song-item" v-for="(song,index) in suggestData.songs" :key="index" v-touch-->
        <!--                @click="gotoSearchDetails('song',song.name)"-->
        <!--            >-->
        <!--              <span>{{ song.name }}</span></li>-->
        <!--          </ul>-->
        <!--        </div>-->
        <!--        <div class="split-block" v-if="suggestData.artists" :style="{order:getOrder('artists')}">-->
        <!--          <h4 class="subtitle">-->
        <!--            <van-icon-->
        <!--                class="subtitle-icon"-->
        <!--                class-prefix="music"-->
        <!--                name="geshou"-->
        <!--            />-->
        <!--            歌手-->
        <!--          </h4>-->
        <!--          <ul class="artist-list">-->
        <!--            <li class="artist-item" v-for="(artist,index) in suggestData.artists" :key="index"-->
        <!--                @click="gotoSearchDetails('artist',artist.name)"-->
        <!--                v-touch>-->
        <!--              <div class="avatar">-->
        <!--                <van-image-->
        <!--                    width="100%"-->
        <!--                    height="100%"-->
        <!--                    fit="cover"-->
        <!--                    :src="artist.picUrl"-->
        <!--                    round-->
        <!--                />-->
        <!--              </div>-->
        <!--              <div class="name">-->
        <!--                <span>{{ artist.name }}</span>-->
        <!--              </div>-->
        <!--            </li>-->
        <!--          </ul>-->
        <!--        </div>-->
        <!--        <div class="split-block" v-if="suggestData.playlists" :style="{order:getOrder('playlists')}">-->
        <!--          <h4 class="subtitle">-->
        <!--            <van-icon-->
        <!--                class="subtitle-icon"-->
        <!--                class-prefix="music"-->
        <!--                name="gedan"-->
        <!--            />-->
        <!--            歌单-->
        <!--          </h4>-->
        <!--          <ul class="playlist-list">-->
        <!--            <li class="playlist-item" v-for="(playlist,index) in suggestData.playlists" :key="index"-->
        <!--                v-touch @click="gotoSearchDetails('playlist',playlist.name)">-->
        <!--              <div class="avatar">-->
        <!--                <van-image-->
        <!--                    width="100%"-->
        <!--                    height="100%"-->
        <!--                    fit="cover"-->
        <!--                    :src="playlist.coverImgUrl"-->
        <!--                />-->
        <!--              </div>-->
        <!--              <div class="name">-->
        <!--                <span>{{ playlist.name }}</span>-->
        <!--              </div>-->
        <!--            </li>-->
        <!--          </ul>-->
        <!--        </div>-->
        <!--        <div class="split-block" v-if="suggestData.albums" :style="{order:getOrder('albums')}">-->
        <!--          <h4 class="subtitle">-->
        <!--            <van-icon-->
        <!--                class="subtitle-icon"-->
        <!--                class-prefix="music"-->
        <!--                name="zhuanji"-->
        <!--            />-->
        <!--            专辑-->
        <!--          </h4>-->
        <!--          <ul class="album-list">-->
        <!--            <li class="album-item" v-for="(album,index) in suggestData.albums" :key="index" v-touch-->
        <!--                @click="gotoSearchDetails('album',album.name)"-->
        <!--            >-->
        <!--              <div class="avatar">-->
        <!--                <van-image-->
        <!--                    width="100%"-->
        <!--                    height="100%"-->
        <!--                    fit="cover"-->
        <!--                    :src="album.artist.picUrl"-->
        <!--                />-->
        <!--              </div>-->
        <!--              <div class="name">-->
        <!--                <span>{{ album.name }} - {{ album.artist.name }}</span>-->
        <!--              </div>-->
        <!--            </li>-->
        <!--          </ul>-->
        <!--        </div>-->
      </template>
    </div>
  </div>
  <div class="hot">
    <div class="header">
      <van-icon class-prefix="music" name="remen"/>
      <span>大家都在搜</span>
    </div>
    <ul class="tags">
      <li
          class="tag soft"
          v-for="(item, index) in hotData"
          :key="index"

          @click="gotoSearchDetails('tag',item.first)"
          v-touch
      >
        <span>{{ item.first }}</span>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.search {
  position: relative;
  height: 3rem;

  .search-suggestions {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 90%;
    left: 5%;
    right: 5%;
    top: 4rem;
    z-index: 1;
    max-height: 70vh;
    overflow-y: scroll;

    .split-block {
      margin: 1rem;

      .subtitle {
        color: #999;

        .subtitle-icon {
          margin-right: 0.2rem;
        }
      }

      .song-list,
      .artist-list,
      .playlist-list,
      .album-list {
        margin: 0.5rem 0;

        .song-item {
          line-height: 3rem;
          font-size: 14px;
          height: 2.5rem;
          padding: 0 0.5rem;

          span {
            width: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: keep-all;
          }
        }

        .artist-item,
        .playlist-item,
        .album-item {
          display: flex;
          align-items: center;
          height: 4rem;
          font-size: 14px;
          padding: 0 0.5rem;

          .avatar {
            flex-grow: 0;
            width: 3rem;
            height: 3rem;
          }

          .name {
            flex-grow: 1;
            padding: 0 1rem;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: keep-all;
          }
        }
      }
    }
  }
}

.hot {
  .header {
    color: red;
    margin: 1rem;
  }

  .tags {
    .tag {
      display: inline-block;
      padding: 0.5rem 1rem;
      margin: 0.5rem;
      font-size: 14px;
      background: #fff;
      color: #999;

      &.touch {
        background: #409eff;
        color: white;
      }
    }
  }
}
</style>

<script setup>
import {ref} from "vue";
import {getSearchHot, getSearchSuggest} from "../api/api";
import {useRouter} from "vue-router";
import VText from "../components/VText.vue";

let router = useRouter();

let searchFields = [
  {
    fieid: 'songs',
    listClass: 'song-list',
    listItemClass: 'song-item',
    nameKey: 'name',
    icon: 'yinle',
    title: '歌曲'
  },
  {
    fieid: 'artists',
    listClass: 'artist-list',
    listItemClass: 'artist-item',
    nameKey: 'name',
    picKey: 'picUrl',
    roundPic: true,
    icon: 'geshou',
    title: '歌手'
  },
  {
    fieid: 'playlists',
    listClass: 'playlist-list',
    listItemClass: 'playlist-item',
    nameKey: 'name',
    picKey: 'coverImgUrl',
    roundPic: false,
    icon: 'gedan',
    title: '歌单'
  },
  {
    fieid: 'albums',
    listClass: 'album-list',
    listItemClass: 'album-item',
    nameKey: 'name',
    picKey: (data) => data.artist.picUrl,
    roundPic: false,
    icon: 'zhuanji',
    title: '专辑'
  },
]

// 热搜数组
let hotData = ref([]);

// 搜索建议显示
let showSearchSuggestions = ref(true);

// 搜索建议的数据
let suggestData = ref({});

// 搜索绑定的字符串
let searchText = ref("");

// 是否显示搜索加载中状态
let searchLoading = ref(true);

getSearchHot().then((res) => {
  hotData.value = res.result.hots;
});


function gotoSearchDetails(type, data) {
  router.replace("/search_details/" + encodeURIComponent(data));
}


/**
 * 获取数据排序
 */
function getOrder(name) {
  let order = suggestData.order ?? [];
  if (!order && order.length == 0) {
    return 0;
  }
  let index = order.indexOf(name);
  if (index < 0) {
    return 0;
  }
  return order.length - index;
}

function searchBlur() {

}

// 搜索建议状态 true是查找中，false是没有在查询
let seachSuggestionsFlag = false;

function changeText() {
  if (searchText.value === '') {
    setTimeout(() => {
      showSearchSuggestions.value = false;
    });
  } else {
    setTimeout(() => {
      showSearchSuggestions.value = true;
    });
  }
  if (seachSuggestionsFlag || searchText.value === '') {
    return;
  }
  seachSuggestionsFlag = true;
  getSuggest();

  function getSuggest() {
    if (!searchText.value) return;
    setTimeout(() => {
      getSearchSuggest(searchText.value)
          .then((res) => {
            console.log(res);
            let result = res.result;
            if (result) {
              suggestData.value = result;
              seachSuggestionsFlag = false;
            } else {
              getSuggest();
            }
          })
          .catch(() => {
            seachSuggestionsFlag = false;
          });
    }, 500);
  }
}
</script>